<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item prop="keywords" label="关键字">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入用户名/昵称/手机号"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
<!--        <el-form-item prop="status" label="状态">-->
<!--          <el-select-->
<!--            v-model="queryParams.status"-->
<!--            placeholder="请选择状态"-->
<!--            clearable-->
<!--            style="width: 160px"-->
<!--          >-->
<!--            <el-option label="正常" value="1"/>-->
<!--            <el-option label="禁用" value="0"/>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item prop="gender" label="性别">
          <el-select
            v-model="queryParams.gender"
            placeholder="请选择性别"
            clearable
            style="width: 160px"
          >
            <el-option label="男" value="1"/>
            <el-option label="女" value="2"/>
            <el-option label="保密" value="0"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <i-ep-search/>
            搜索
          </el-button>
          <el-button @click="handleResetQuery">
            <i-ep-refresh/>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <el-table
        v-loading="loading"
        :data="pageData"
        highlight-current-row
        border
        row-key="id"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="ID" prop="id" width="80" align="center"/>
        <el-table-column label="用户名" prop="username"/>
        <el-table-column label="昵称" prop="nickname"/>
        <el-table-column label="性别" prop="gender" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.gender === '1'" type="primary">男</el-tag>
            <el-tag v-if="scope.row.gender === '2'" type="success">女</el-tag>
            <el-tag v-if="scope.row.gender === '0'" type="info">保密</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="phone"/>
        <el-table-column label="头像" prop="avatar" width="100">
          <template #default="scope">
            <el-avatar v-if="scope.row.avatar" :src="scope.row.avatar" size="large"/>
            <span v-else>无</span>
          </template>
        </el-table-column>
<!--        <el-table-column label="状态" prop="status" align="center">-->
<!--          <template #default="scope">-->
<!--            <el-switch-->
<!--              v-model="scope.row.status"-->
<!--              active-value="1"-->
<!--              inactive-value="0"-->
<!--              @change="handleStatusChange(scope.row)"-->
<!--            />-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="创建时间" prop="createTime" width="180"/>
<!--        <el-table-column label="操作" align="center" width="180">-->
<!--          <template #default="scope">-->
<!--            <el-button-->
<!--              size="small"-->
<!--              type="primary"-->
<!--              @click="handleEdit(scope.row)"-->
<!--            >-->
<!--              编辑-->
<!--            </el-button>-->
            <!--            <el-button-->
            <!--              size="small"-->
            <!--              type="danger"-->
            <!--              @click="handleDelete(scope.row)"-->
            <!--            >-->
            <!--              删除-->
            <!--            </el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>

    <!-- 新增/编辑弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="500px"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="username"
                      :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
          <el-input v-model="formData.username" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="formData.nickname" placeholder="请输入昵称"/>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="formData.gender">
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
            <el-radio label="0">保密</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <!--          <el-upload-->
          <!--            action="/api/upload/avatar"-->
          <!--            :show-file-list="false"-->
          <!--            @success="handleAvatarUpload"-->
          <!--          >-->
          <!--            <el-button type="primary">上传头像</el-button>-->
          <!--          </el-upload>-->
          <el-avatar v-if="formData.avatar" :src="formData.avatar" size="small" class="mt-2"/>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="formData.status" active-value="1" inactive-value="0"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <!--        <el-button type="primary" @click="handleSubmit">确定</el-button>-->
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="js">
import {onMounted, reactive, ref} from 'vue';
import {getPage} from "@/api/mpuser";

defineOptions({
  name: "UserManager",
  inheritAttrs: false,
});
const queryFormRef = ref();
const formRef = ref();

// 加载状态
const loading = ref(false);
// 总条数
const total = ref(0);
// 表格数据
const pageData = ref([]);

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  keywords: "",
  status: null,
  gender: null,
  tenantId: null
});

// 弹窗状态
const dialogVisible = ref(false);
const dialogTitle = ref("新增用户");

// 表单数据
const formData = reactive({
  id: null,
  username: "",
  nickname: "",
  gender: "0",
  openid: "",
  avatar: "",
  phone: "",
  status: "1",
  createTime: "",
  createBy: null,
  updateTime: "",
  updateBy: null,
  isDeleted: "0"
});

/** 查询用户列表 */
function handleQuery() {
  loading.value = true;
  getPage(queryParams)
    .then((data) => {
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置查询 */
function handleResetQuery() {
  queryFormRef.value?.resetFields();
  queryParams.pageNum = 1;
  queryParams.status = null;
  queryParams.gender = null;
  handleQuery();
}

/** 编辑用户 */
function handleEdit(row) {
  dialogTitle.value = "编辑用户";
  // 深拷贝用户数据到表单
  Object.assign(formData, JSON.parse(JSON.stringify(row)));
  dialogVisible.value = true;
}

/** 提交表单 */
// function handleSubmit() {
//   formRef.value?.validate(async (valid) => {
//     if (valid) {
//       try {
//         if (formData.id) {
//           // 编辑操作
//           await UserAPI.update(formData);
//           message.success("修改成功");
//         } else {
//           // 新增操作
//           await UserAPI.add(formData);
//           message.success("新增成功");
//         }
//         dialogVisible.value = false;
//         handleQuery();
//       } catch (error) {
//         message.error("操作失败，请重试");
//       }
//     }
//   });
// }

/** 状态变更 */
function handleStatusChange(row) {
  // UserAPI.updateStatus(row.id, row.status)
  //   .then(() => {
  //     message.success("状态更新成功");
  //   })
  //   .catch(() => {
  //     // 失败时回滚状态
  //     row.status = row.status === "1" ? "0" : "1";
  //     message.error("状态更新失败");
  //   });
}

/** 删除用户 */
// function handleDelete(row: UserPageVO) {
//   ElMessageBox.confirm(
//     "确定要删除该用户吗？",
//     "删除确认",
//     {
//       confirmButtonText: "确定",
//       cancelButtonText: "取消",
//       type: "warning",
//     }
//   ).then(async () => {
//     try {
//       await UserAPI.delete(row.id);
//       message.success("删除成功");
//       handleQuery();
//     } catch (error) {
//       message.error("删除失败");
//     }
//   });
// }

/** 头像上传回调 */
// function handleAvatarUpload(response: any) {
//   if (response.code === 200) {
//     formData.avatar = response.data;
//     message.success("上传成功");
//   } else {
//     message.error("上传失败：" + response.message);
//   }
// }

// 页面挂载时查询数据
onMounted(() => {
  handleQuery();
});
</script>

<style scoped>
.el-avatar {
  margin-top: 5px;
}
</style>
